<template>
  <afl-loading
    v-if="!remoteData.ready"
    :width="50"
    :height="50"
    class="afl-loading"
    :tip-style="{ fontSize: '16px' }"
  >
    Loading...
  </afl-loading>
  <ScaleBox  :width="1920" :height="1080" bgc="transparent" :delay="100" v-else>
    <el-container class="first-container">
      <!--<editor-fold desc="数据汇总">-->
      <el-header class="header">
        <line-header
          processName="Gluing"
          :data="remoteData.processCount"
        ></line-header>
      </el-header>
      <!--</editor-fold>-->
      <el-container class="second-container">
        <!--<editor-fold desc="条线选择">-->
        <el-aside class="second-aside">
          <process-line
            @handle="menuClick"
            :process-id="'TH'"
            :title="lineTitle"
            filter="THPDLine"
            :frequency="remoteData.refreshFrequency"
            :currentLine="remoteData.currentProductionLine"
          ></process-line>
        </el-aside>
        <!--</editor-fold>-->
        <!--<editor-fold desc="数据展示">-->
        <el-container class="second-main">
          <!--<editor-fold desc="单条线数据汇总">-->
          <el-header class="sum-wrapper">
            <line-sum :data="remoteData.lineCount"></line-sum>
          </el-header>
          <!--</editor-fold>-->
          <!--<editor-fold desc="实时数据">-->
          <el-header class="real-wrapper">
            <real-data-card :data="remoteData.realTimeData"></real-data-card>
          </el-header>
          <!--</editor-fold>-->
          <el-main class="dg-wrapper">
            <history-data-dg
              @search="updateQueryParams"
              :queryParams="queryParams"
              :data="remoteData.historyData"
            ></history-data-dg>
          </el-main>
        </el-container>
        <!--</editor-fold>-->
      </el-container>
    </el-container>

  </ScaleBox>
</template>

<script>
import { provide, reactive, ref } from "vue";
import loading from "@/components/loading";
import processLine from "@/components/mes/common/processLine";
import fullScreenContainer from "@/components/fullScreenContainer";
import getTHData from "@/views/mes/THLines/getTHData";
import lineHeader from "@/components/mes/THLines/lineHeader";
import lineSum from "@/components/mes/THLines/lineSum";
import realDataCard from "@/components/mes/THLines/realDataCard";
import historyDataDg from "@/components/mes/THLines/historyDataDg";
import i18n from "@/hooks/language";
import ScaleBox from "vue3-scale-box";
import shiftTime from "@/hooks/shiftTime";
// 引入animate css
// import 'animate.css'

export default {
  name: "THLines",
  components: {
    aflLoading: loading,
    processLine,
    lineHeader,
    lineSum,
    ScaleBox,
    realDataCard,
    historyDataDg,
  },
  setup() {
    shiftTime();
    const { t } = i18n();
    const lineTitle = ref(t("wms.lineSelect"));
    const menuClick = (processRow) => {
      queryParams.productionLineCode = processRow?.productionLineCode;
    };
    const queryParams = reactive({
      productionLineCode: null,
      page: 1,
      rows: 10,
      total: 0,
      shiftCode: null,
    });
    /* 更新查询参数 */
    const updateQueryParams = (params) => {
      Object.assign(queryParams, params);
    };

    /* 依赖注入 */
    provide("queryParams", queryParams);
    provide("updateQueryParams", updateQueryParams);
    // 获取远程数据
    const { remoteData } = getTHData(queryParams, false);
    return {
      lineTitle,
      remoteData,
      menuClick,
      queryParams,
      updateQueryParams,
    };
  },
};
</script>

<style scoped lang="scss">
@forward "index";
</style>
